<template>
	<view class="flex avatar-list-container">
		<view class="avatar" v-for='(item,index) in list' :key="item.id+String(index)" @click="toView(item)" :style="{transform: `translateX(${-left}px)`}">
			<u-avatar class="avatar-img" size='108rpx' :src="$ossUrl+item.avatar"></u-avatar>
			<w-image class="avatar-tag" :src='item.headimg' width="76" height="78"></w-image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			items: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				avatarWidth: 0,
				timer: null,
				left:0,
				list:[]
			}
		},
		watch: {
			'items.length': {
				deep:true,
				immediate:true,
				handler(v) {
					this.init()
				}
			}
		},
		computed:{
			listTotal(){
				return this.list.length*this.avatarWidth
			}
		},
		methods: {
			toView(item){
				uni.navigateTo({
					url:'/pages/rank/userBuy?id='+item.id
				})
			},
			init() {
				this.list=this.$tools.copyObj(this.items);
				if (this.list.length > 4) {
					let afterList=this.items.slice(0,5);
					this.list.push(...afterList)
					this.$nextTick(()=>{
						this.getAvatarWidth()
					})
				}
			},
			clear() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			},
			getAvatarWidth() {
				if (!this.list.length) return
				uni.createSelectorQuery().in(this).select('.avatar').boundingClientRect(result => {
					this.avatarWidth = result.width
					if (this.list.length > 4 && !this.timer) {
						this.startMove();
					}
				}).exec();
			},
			
			startMove() {
				this.clear()
				this.timer = setInterval(() => {
					this.left++
					if(this.left>=this.listTotal-this.avatarWidth*5){
						this.left=0
					}
				}, 10)
			},

			
		},

	}
</script>

<style lang="scss">
	.avatar-list {
		&-container {
			// padding-bottom: 40rpx;
			width: 750rpx;
			bottom: 0;
			// position: absolute;
			left: 0;
			overflow-x: hidden;
			margin-bottom: 50rpx;
			// margin-top: 300rpx;
			.avatar {
				min-width: 164rpx;
				min-height: 156rpx;
				width: 164rpx;
				height: 156rpx;
				position: relative;
				padding: 0 6rpx;

				.avatar-img {
					position: absolute;
					left: 28rpx;
					right: 27rpx;
					top: 30rpx;
				}

				.avatar-tag {
					left: 6rpx;
					top: 0;
					// width: 152rpx;
					// height: 156rpx;
					position: absolute;
				}
			}
		}
	}
</style>